import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'cne-dashboard',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="dashboard-content">
      <h1>欢迎使用 Cne Admin Ng</h1>
      <p>这是一个使用 Angular 19+ 和 Material Design 构建的管理后台系统。</p>
      
      <div class="feature-cards">
        <div class="card">
          <h3>🚀 现代化技术栈</h3>
          <p>使用 Angular 19+ 的最新特性，包括 signals、standalone 组件和原生控制流。</p>
        </div>
        
        <div class="card">
          <h3>🎨 Material Design</h3>
          <p>基于 Angular Material 19+ 的现代化 UI 设计，提供一致的用户体验。</p>
        </div>
        
        <div class="card">
          <h3>🎯 Tailwind CSS</h3>
          <p>使用 Tailwind CSS 3.4+ 进行快速样式开发，提供原子化CSS和响应式设计。</p>
        </div>
        
        <div class="card">
          <h3>📱 响应式布局</h3>
          <p>支持多种屏幕尺寸，确保在不同设备上都有良好的显示效果。</p>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .dashboard-content {
      padding: 24px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    h1 {
      color: #1976d2;
      margin-bottom: 16px;
      font-size: 2.5rem;
      font-weight: 300;
    }
    
    p {
      color: #666;
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 32px;
    }
    
    .feature-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-top: 32px;
    }
    
    .card {
      background: white;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
    
    .card h3 {
      color: #1976d2;
      margin-bottom: 12px;
      font-size: 1.3rem;
      font-weight: 500;
    }
    
    .card p {
      color: #666;
      margin-bottom: 0;
      font-size: 1rem;
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent {

}
